import {connect} from 'react-redux';
import * as actions from '../actions';
import {goto} from 'shared/actions';
import * as React from "react";
import {Button, Icon, Popconfirm} from 'antd';
const Database = ({databases, activeDatabase, onClick, onDelete}) => {
  return (
    <div className="web-datasource-database web-box flex-direction-column">
      <div className="web-datasource-database-top">
        <a href="#/datasource/create"><Button type="primary">新建数据源</Button></a>
      </div>
      <div className="web-datasource-database-body flex-grow-1">
        {
          databases && databases.map(item => {
            const classnames = ["web-datasource-database-item", "web-box"];
            if (activeDatabase && activeDatabase.get('id') === item.get('id')) {
              classnames.push("web-datasource-database-item-active");
            }
            return (
              <div key={item.get('id')} onClick={() => onClick(item)} className={classnames.join(' ')}>
                <div className="flex-grow-1 ellipsis1">{item.get('name')}</div>
                <div className="web-datasource-database-item-action">
                  <a href={`#/datasource/modify/${item.get('id')}`}><Icon type="edit"/></a>
                  &nbsp;&nbsp;
                  <Popconfirm
                    placement="top"
                    title={'确定删除吗？'}
                    onConfirm={() => onDelete(item.get('id'))}
                    okText="确定"
                    cancelText="取消"
                  >
                    <a><Icon type="delete"/></a>
                  </Popconfirm>
                </div>
              </div>
            );
          })
        }
      </div>
    </div>
  );
}

const mapDispatchToProps = {
  onDelete: actions.onDelete
};

export default connect(null, mapDispatchToProps)(Database);
